<template>
  <section>
    <div class="warp1">
      <ul class="item">
        <li>
          <div class="item-div" style="padding: 15px; margin: 0px;">
            <span class="date1">哈希地址</span>
            <span class="date">区块高度</span>
            <span class="title">日期</span>
          </div>
        </li>
      </ul>
    </div>
    <vue-seamless-scroll :data="list" class="warp" :class-option="classOption">
      <ul class="item">
        <li v-for="(item, index) in list" :key="index">
          <div class="item-div" style="padding: 15px; margin: 0px;">
            <span class="date1" v-text="item.blockInfoObj.blockHash"></span>
            <span class="date" v-text="item.blockInfoObj.blockNumber"></span>
            <span class="title" v-text="item.createTime"></span>
          </div>
        </li>
      </ul>
    </vue-seamless-scroll>
  </section>
</template>
<script>
// 无需导入真实API，直接模拟数据
export default {
  data() {
    return {
      list: [], // 滚动列表数据
      classOption: {
        direction: 0, // 0: 向上滚动, 1: 向下滚动
        step: 0.1,    // 滚动步长（值越小越慢）
      },
      
      // 模拟数据模板
      mockData: {
        rows: [
          {
            blockInfo: '{"blockHash": "0x2a3b4c5d6e7f8a9b0c1d2e3f4a5b6c7d", "blockNumber": 100}',
            createTime: "2025-03-25 09:00:00"
          },
          {
            blockInfo: '{"blockHash": "0x3b4c5d6e7f8a9b0c1d2e3f4a5b6c7d8", "blockNumber": 101}',
            createTime: "2025-03-25 09:05:00"
          },
          {
            blockInfo: '{"blockHash": "0x4c5d6e7f8a9b0c1d2e3f4a5b6c7d8e", "blockNumber": 102}',
            createTime: "2025-03-25 09:10:00"
          }
        ],
        total: 100 // 总数据量（用于分页）
      }
    };
  },
  created() {
    // 模拟数据加载（带300ms延迟）
    setTimeout(() => this.loadMockData(), 300);
    
    // 模拟数据动态更新（每5秒新增一条数据）
    setInterval(() => this.updateMockData(), 5000);
  },
  methods: {
    loadMockData() {
      // 模拟接口返回数据结构
      const mockResponse = {
        rows: this.mockData.rows.map(item => ({
          ...item,
          blockInfo: JSON.stringify({
            ...JSON.parse(item.blockInfo),
            blockNumber: Math.floor(Math.random() * 100 + 100) // 随机区块高度
          })
        })),
        total: this.mockData.total
      };

      // 保留原有数据处理逻辑
      this.list = mockResponse.rows.map(item => {
        const blockInfoObj = JSON.parse(item.blockInfo);
        blockInfoObj.blockNumber += 6000; // 保留业务逻辑：区块高度 +6000
        return { ...item, blockInfoObj };
      });
    },

    updateMockData() {
      // 模拟新增数据（从顶部插入）
      this.mockData.rows.unshift({
        blockInfo: `{"blockHash": "0x${Math.random().toString(36).substr(2, 20)}", "blockNumber": ${Math.floor(Math.random() * 100 + 100)}}`,
        createTime: new Date().toLocaleString()
      });
      
      // 限制最多显示10条数据
      if (this.mockData.rows.length > 10) {
        this.mockData.rows.pop();
      }
      
      this.loadMockData(); // 重新加载数据触发滚动
    }
  }
};
</script>
<style lang="scss" scoped>
.warp1 {
  height: 60px;
  width: 100%;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .item-div {
        display: flex;
        align-items: flex-start;
        width: 100%;
        color: #606266;
        font-size: 14px;
        border-bottom: 1px solid #e5e1e1; // 将 #000000 替换为你想要的颜色
        flex-wrap: wrap; // 使子元素在溢出时换行

        .title,
        .date,
        .date1 {
          word-wrap: break-word; // 使长单词在容器边界处换行
          word-break: break-all; // 强制在任意字符处换行
          flex: 1 1 auto; // 允许span在需要时换行
          min-width: 0; // 防止 flex 元素超出容器宽度
        }

        .title {
          width: 70px;
          text-align: center;
          flex: 1;
        }

        .date {
          margin-left: 30px;
          text-align: left;
        }

        .date1 {
          width: 80px;
          margin-left: 30px;
          text-align: center;
        }
      }
    }
  }
}
.warp {
  height: 268px;
  width: 100%;
  margin: 0 auto;
  // margin-top: 20px;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .item-div {
        display: flex;
        align-items: flex-start;
        width: 100%;
        color: #606266;
        font-size: 14px;
        border-bottom: 1px solid #e5e1e1; // 将 #000000 替换为你想要的颜色
        flex-wrap: wrap; // 使子元素在溢出时换行

        .title,
        .date,
        .date1 {
          word-wrap: break-word; // 使长单词在容器边界处换行
          word-break: break-all; // 强制在任意字符处换行
          flex: 1 1 auto; // 允许span在需要时换行
          min-width: 0; // 防止 flex 元素超出容器宽度
        }

        .title {
          width: 70px;
          text-align: center;
          flex: 1;
        }

        .date {
          margin-left: 50px;
          text-align: left;
        }

        .date1 {
          width: 80px;
          margin-left: 10px;
          text-align: center;
        }
      }
    }
  }
}
</style>
